BootStrap研究

1.	布局

	<div class="col-md-12 column">
		<div class="row clearfix">
			<div class="col-md-12 column">
			</div>
		</div>
		<div class="row clearfix">
			<div class="col-md-6 column">
			</div>
			<div class="col-md-6 column">
			</div>
		</div>
		<div class="row clearfix">
			<div class="col-md-9 column">
			</div>
			<div class="col-md-3 column">
			</div>
		</div>
		<div class="row clearfix">
			<div class="col-md-4 column">
			</div>
			<div class="col-md-4 column">
			</div>
			<div class="col-md-4 column">
			</div>
		</div>
	</div>

2.	网站顶部
	<div id="top">
		<div id="topBar">
			<div class="userPanel">
				<ul>
					<li>
						<a href="#">手机版</a>
					</li>
					<li>
						<a href="#">设为首页</a>
					</li>
					<li>
						<a href="#">加入收藏</a>
					</li>
					<li>
						<a href="#">联系我们</a>
					</li>
				</ul>
			</div>
			<div class="welcome">
				欢迎光临洋洋网络工作室网站！
			</div>
		</div>
	</div>	
	
3. 网站LOGO
	<div id="header">
		<div class="topAD">
			专业、专注、专心
		</div>
		<div class="logo">
			洋洋网络标准网站
		</div>
	</div>
	
4. 通用信息列表
	<ul class="infoList">
		<li>
			 <span class="date">01-02</span> <a href="#">红木家具保养七绝技</a>
		</li>
		<li>
			 <span class="date">01-02</span> <a href="#">何时购买红木家具最合适？</a>
		</li>
		<li>
			 <span class="date">01-02</span> <a href="#">红木家具绿色环保</a>
		</li>
		<li>
			 <span class="date">01-02</span> <a href="#">选购和定制家具，消费者如…</a>
		</li>
	</ul>

	
5. 网站底部
	<div id="footer">
		<div class="footerNav">
			 <a href="#">关于我们</a> | 
			 <a href="#">服务条款</a> | 
			 <a href="#">免责声明</a> | 
			 <a href="#">网站地图</a> | 
			 <a href="#">联系我们</a>
		</div>
		<div class="copyRight">
			Copyright ©2010-2014洋洋网络工作室 版权所有
		</div>
	</div>

6. 侧栏导航菜单
	<div class="sideBox" id="sideMenu">
		<div class="hd">
			<h3>
				<span>关于我们</span>
			</h3>
		</div>
		<div class="bd">
			<ul class="menuList">
				<li>
					<a href="#">公司简介</a>
				</li>
				<li>
					<a href="#">企业文化</a>
				</li>
				<li>
					<a href="#">组织结构</a>
				</li>
				<li>
					<a href="#">资质认证</a>
				</li>
				<li>
					<a href="#">联系我们</a>
				</li>
			</ul>
		</div>
	</div>
			
7. 文章子列表面
	<div class="box ui-draggable" id="mainBox">
		<div class="mHd">
			<div class="path">
				<em>您现在位置：</em>
				<a class="home" href="index.html">首页</a>
				&gt;
				<a href="#">关于我们</a>
				&gt;
				<a href="#">公司简介</a>
			</div>
			<h3>
				<span>公司简介</span>
			</h3>
		</div>
		<div class="mBd">
			<ul class="newsList">
				<li>
					 <span class="date">01-02</span> <a href="#">红木家具保养七绝技</a>
				</li>
				<li>
					 <span class="date">01-02</span> <a href="#">何时购买红木家具最合适？</a>
				</li>
				<li class="split">
				</li>
				<li>
					 <span class="date">01-02</span> <a href="#">红木家具绿色环保</a>
				</li>
				<li>
					 <span class="date">01-02</span> <a href="#">选购和定制家具，消费者如…</a>
				</li>
				<li>
					 <span class="date">01-02</span> <a href="#">享受古典家具 红木家具难弃爱</a>
				</li>
			</ul>
		</div>
	</div>

8. 文章内容页
	<div class="articleContent">
		<h2 class="title">
			选购和定制家具，消费者如何少花钱？
		</h2>
		<div class="property">
			 <span>文章来源：互联网</span> 
			 <span>作者：朱春</span> 
			 <span>发布时间：2013年12月03日</span> 
			 <span>点击数：25</span> 
			 <span>【字号：
				<a class="fontZoomA" href="javascript:fontZoomA();">小</a>
				<a class="fontZoomB" href="javascript:fontZoomB();">大</a>】
			</span>
		</div>
		<div id="contentTxt">
			<p>
				<img src="skin/images/banner1.jpg" alt='' />
			</p>
			<p>
				五金、建材的价格涨了，家具也要提价了，打算定制家具的业主要如何省钱？一些整体衣柜企业从厂家的角度提出了几条非常实用的建议，消费者不妨看看。
			</p>
			<p>
				第一可以选择到性价比比较高的厂家定制家具。高性价比意味着产品品质有保证，价钱又比较实惠。而且即使涨价，这类品牌的产品也不会涨太多。
			</p>
			<p>
				还有就是可以选择参加厂家举行的团购。一般来说，厂家在团购会提供的产品，价格要比市场价优惠，而且产品质量也有保证。对于定制衣柜等大量家具的消费者来说，通过团购，能节省不少费用。这也是团购会收到热烈欢迎的一个原因。同时，通过参加团购提早签单，也是避免涨价风险的一个好办法。厂家推荐的其他装修省钱之道还有多了解市场行情、在节假日时选购家具、参加网购等。
			</p>
		</div>
	</div>
	
9. 标题
	<h3>
		这是一个标题
	</h3>

10. 段落
	<p>
		这里是一个段落
	</p>
	
11. 地址
	<address> 
		<strong>XXX公司</strong>
		<br /> 
		地址：某某工业区
		<br /> 
		邮编：000000
	</address>
	
12. 引用块
	<blockquote>
		<p>
			这里是一个引用块的内容
		</p> <small>可以设置右对齐</small>
	</blockquote>


13. 无序列表
	<ul>
		<li>
			标题一
		</li>
		<li>
			标题二
		</li>
		<li>
			标题三
		</li>
		<li>
			标题四
		</li>
		<li>
			标题五
		</li>
	</ul>


14. 有序列表
	<ol>
		<li>
			标题一
		</li>
		<li>
			标题二
		</li>
		<li>
			标题三
		</li>
		<li>
			标题四
		</li>
		<li>
			标题五
		</li>
	</ol>


15. 详细描述
	<dl>
		<dt>
			产品名称：
		</dt>
		<dd>
			XXXX产品
		</dd>
		<dt>
			产品型号：
		</dt>
		<dd>
			Xs-201
		</dd>
		<dt>
			产品尺寸：
		</dt>
		<dd>
			210x451x50
		</dd>
		<dt>
			产品说明：
		</dt>
		<dd>
			这里是产品的说明内容啦！
		</dd>
	</dl>


16. 表格
	<table class="table">
		<thead>
			<tr>
				<th>
					编号
				</th>
				<th>
					产品
				</th>
				<th>
					上线时间
				</th>
				<th>
					状态
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					1
				</td>
				<td>
					TB - Monthly
				</td>
				<td>
					01/04/2012
				</td>
				<td>
					Default
				</td>
			</tr>
			<tr class="active">
				<td>
					1
				</td>
				<td>
					TB - Monthly
				</td>
				<td>
					01/04/2012
				</td>
				<td>
					Approved
				</td>
			</tr>
			<tr class="success">
				<td>
					2
				</td>
				<td>
					TB - Monthly
				</td>
				<td>
					02/04/2012
				</td>
				<td>
					Declined
				</td>
			</tr>
			<tr class="warning">
				<td>
					3
				</td>
				<td>
					TB - Monthly
				</td>
				<td>
					03/04/2012
				</td>
				<td>
					Pending
				</td>
			</tr>
			<tr class="danger">
				<td>
					4
				</td>
				<td>
					TB - Monthly
				</td>
				<td>
					04/04/2012
				</td>
				<td>
					Call in to confirm
				</td>
			</tr>
		</tbody>
	</table>


17. 提交表单
	<form role="form">
		<div class="form-group">
			 <label for="exampleInputEmail1">邮箱：</label>
			 <input class="form-control" id="exampleInputEmail1" type="email" />
		</div>
		<div class="form-group">
			 <label for="exampleInputPassword1">密码：</label><input class="form-control" id="exampleInputPassword1" type="password" />
		</div>
		<div class="form-group">
			 <label for="exampleInputFile">附件：</label><input id="exampleInputFile" type="file" />
			<p class="help-block">
				请上传您的附件！
			</p>
		</div>
		<div class="checkbox">
			 <label><input type="checkbox" /> 同意请打勾</label>
		</div> 
		<button class="btn btn-default" type="submit">提交</button>
	</form>


18. 用户登录
	<form class="form-horizontal" role="form">
		<div class="form-group">
			 <label class="col-sm-2 control-label" for="inputEmail3">邮箱：</label>
			<div class="col-sm-10">
				<input class="form-control" id="inputEmail3" type="email" />
			</div>
		</div>
		<div class="form-group">
			 <label class="col-sm-2 control-label" for="inputPassword3">密码：</label>
			<div class="col-sm-10">
				<input class="form-control" id="inputPassword3" type="password" />
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				<div class="checkbox">
					 <label><input type="checkbox" /> 记住我</label>
				</div>
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				 <button class="btn btn-default" type="submit">登录</button>
			</div>
		</div>
	</form>


19. 按钮
	<button class="btn btn-default" type="button">默认</button>


20. 文字按钮
	<a class="btn" href="#" type="button">按钮</a>


21. 图片
	<img alt="140x140" src="skin/img/140.jpg" />


22. 按钮组
	<div class="btn-group">
		 <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-left"></em> 1</button> 
		 <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-center"></em> 2</button> 
		 <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-right"></em> 3</button> 
		 <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-justify"></em> 4</button>
	</div>


23. 下拉菜单
	<div class="btn-group">
		 <button class="btn btn-default">动作</button> 
		 <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		 <span class="caret"></span></button>
		<ul class="dropdown-menu">
			<li>
				<a href="#">操作</a>
			</li>
			<li class="disabled">
				<a href="#">禁止操作</a>
			</li>
			<li class="divider">
			</li>
			<li>
				<a href="#">更多设置</a>
			</li>
		</ul>
	</div>


24. 导航
	<ul class="nav nav-tabs">
		<li class="active">
			<a href="#">首页</a>
		</li>
		<li>
			<a href="#">资料</a>
		</li>
		<li class="disabled">
			<a href="#">消息</a>
		</li>
		<li class="dropdown pull-right">
			 <a class="dropdown-toggle" href="#" data-toggle="dropdown">下拉菜单<strong class="caret"></strong></a>
			<ul class="dropdown-menu">
				<li>
					<a href="#">列表一</a>
				</li>
				<li>
					<a href="#">列表二</a>
				</li>
				<li>
					<a href="#">列表三</a>
				</li>
				<li class="divider">
				</li>
				<li>
					<a href="#">更多列表</a>
				</li>
			</ul>
		</li>
	</ul>


25. 面包屑导航
	<ul class="breadcrumb">
		<li>
			<a href="#">首页</a>
		</li>
		<li>
			<a href="#">关于我们</a>
		</li>
		<li class="active">
			公司简介
		</li>
	</ul>


26. 分页
	<ul class="pagination">
		<li>
			<a href="#">上一页</a>
		</li>
		<li>
			<a href="#">1</a>
		</li>
		<li>
			<a href="#">2</a>
		</li>
		<li>
			<a href="#">3</a>
		</li>
		<li>
			<a href="#">4</a>
		</li>
		<li>
			<a href="#">5</a>
		</li>
		<li>
			<a href="#">下一页</a>
		</li>
	</ul>


27. 文字标签
	 <span class="label label-default">文字标签</span> 
	 <span class="label label-primary">文字标签</span> 
	 <span class="label label-success">文字标签</span> 
	 <span class="label label-info">文字标签</span> 
	 <span class="label label-warning">文字标签</span> 
	 <span class="label label-danger">文字标签</span>


28. 徽标
	<ul class="nav nav-pills">
		<li class="active">
			 <a href="#"> <span class="badge pull-right">42</span> 新信息</a>
		</li>
		<li>
			 <a href="#"> <span class="badge pull-right">16</span> 新信息</a>
		</li>
	</ul>


29. 概述
	<div class="jumbotron">
		<h2>
			概述标题
		</h2>
		<p>
			这是简短的概述内容，这是简短的概述内容，这是简短的概述内容，这是简短的概述内容，这是简短的概述内容，
		</p>
		<p>
			<a class="btn btn-primary btn-large" href="#">查看更多 »</a>
		</p>
	</div>



30. 页标题
	<div class="page-header">
		<h1>
			页标题范例 <small>此处编写页标题</small>
		</h1>
	</div>


31. 文本
	<h2>
		标题
	</h2>
	<p>
		是的，这部分就是内容啦！
	</p>
	<p>
		<a class="btn" href="#">查看更多 »</a>
	</p>


32. 预览列表
	<div class="row">
		<div class="col-md-4">
			<div class="thumbnail">
				<img alt="300x200" src="skin/img/people.jpg" />
				<div class="caption">
					<h3>
						标题一
					</h3>
					<p>
						是的，这部分就是内容啦！
					</p>
					<p>
						<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">更多 »</a>
					</p>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="thumbnail">
				<img alt="300x200" src="skin/img/city.jpg" />
				<div class="caption">
					<h3>
						标题二
					</h3>
					<p>
						对的，这部分就是内容啦！
					</p>
					<p>
						<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">更多 »</a>
					</p>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="thumbnail">
				<img alt="300x200" src="skin/img/sports.jpg" />
				<div class="caption">
					<h3>
						标题三
					</h3>
					<p>
						没错，这部分就是内容啦！
					</p>
					<p>
						<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">更多 »</a>
					</p>
				</div>
			</div>
		</div>
	</div>


33. 进度条
	<div class="progress">
		<div class="progress-bar progress-success">
		</div>
	</div>


34. 媒体对象
	<div class="media">
		 <a class="pull-left" href="#"><img class="media-object" src="skin/img/64.jpg" alt='' /></a>
		<div class="media-body">
			<h4 class="media-heading">
				新标题
			</h4> 这里是简介内容区域！
			<div class="media">
				 <a class="pull-left" href="#"><img class="media-object" src="skin/img/64.jpg" alt='' /></a>
				<div class="media-body">
					<h4 class="media-heading">
						新标题
					</h4> 这里是简介内容区域！
				</div>
			</div>
		</div>
	</div>


35. 列表组
	<div class="list-group">
		<div class="list-group-item active">免费域名注册</div>
		<div class="list-group-item">免费 Window 空间托管
			<p>
				本章将讲解 Bootstrap 进度条。在本教程中,您将看到如何使用 Bootstrap 创建
			</p>
		</div>
		<div class="list-group-item">图像的数量</div>
		<div class="list-group-item">24*7 支持</div>
		<div class="list-group-item">每年更新成本</div>
	</div>


36. 面版
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">
				面版标题
			</h3>
		</div>
		<div class="panel-body">
			面版内容
		</div>
		<div class="panel-footer">
			面版底部
		</div>
	</div>


37. 弹窗
	<a class="btn" id="modal-960682" role="button" href="#modal-container-960682" data-toggle="modal">触发弹窗</a>
	
	<div class="modal fade" id="modal-container-960682" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					 <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
					<h4 class="modal-title" id="myModalLabel">
						标题
					</h4>
				</div>
				<div class="modal-body">
					这里是弹窗的内容
				</div>
				<div class="modal-footer">
					 <button class="btn btn-default" type="button" data-dismiss="modal">关闭</button> <button class="btn btn-primary" type="button">保存</button>
				</div>
			</div>
			
		</div>
		
	</div>


38. 导航条
	<nav class="navbar navbar-default" role="navigation">
		<div class="navbar-header">
			 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
				 <span class="sr-only">切换导航</span>
				 <span class="icon-bar"></span>
				 <span class="icon-bar"></span>
				 <span class="icon-bar"></span>
			 </button> 
			 <a class="navbar-brand" href="#">导航</a>
		</div>
		
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li class="active">
					<a href="#">链接</a>
				</li>
				<li>
					<a href="#">链接</a>
				</li>
				<li class="dropdown">
					 <a class="dropdown-toggle" href="#" data-toggle="dropdown">下拉菜单<strong class="caret"></strong></a>
					<ul class="dropdown-menu">
						<li>
							<a href="#">列表一</a>
						</li>
						<li>
							<a href="#">列表二</a>
						</li>
						<li>
							<a href="#">列表三</a>
						</li>
						<li class="divider">
						</li>
						<li>
							<a href="#">更多列表</a>
						</li>
						<li class="divider">
						</li>
						<li>
							<a href="#">更多列表</a>
						</li>
					</ul>
				</li>
			</ul>
			<form class="navbar-form navbar-left" role="search">
				<div class="form-group">
					<input class="form-control" type="text" />
				</div> <button class="btn btn-default" type="submit">搜索</button>
			</form>
			<ul class="nav navbar-nav navbar-right">
				<li>
					<a href="#">链接</a>
				</li>
				<li class="dropdown">
					 <a class="dropdown-toggle" href="#" data-toggle="dropdown">下拉菜单<strong class="caret"></strong></a>
					<ul class="dropdown-menu">
						<li>
							<a href="#">列表一</a>
						</li>
						<li>
							<a href="#">列表二</a>
						</li>
						<li>
							<a href="#">列表三</a>
						</li>
						<li class="divider">
						</li>
						<li>
							<a href="#">更多列表</a>
						</li>
						<li class="divider">
						</li>
						<li>
							<a href="#">更多列表</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		
	</nav>
	<nav class="navbar navbar-default" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<a class="navbar-brand" href="#">菜鸟教程</a>
			</div>
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">iOS</a></li>
				<li><a href="#">SVN</a></li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						Java
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu">
						<li><a href="#">jmeter</a></li>
						<li><a href="#">EJB</a></li>
						<li><a href="#">Jasper Report</a></li>
						<li class="divider"></li>
						<li><a href="#">分离的链接</a></li>
						<li class="divider"></li>
						<li><a href="#">另一个分离的链接</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</nav>



39. 选项卡
	<div class="tabbable" id="tabs-967443">
		<ul class="nav nav-tabs">
			<li class="active">
				<a href="#panel-699475" data-toggle="tab">选项卡一</a>
			</li>
			<li>
				<a href="#panel-763259" data-toggle="tab">选项卡二</a>
			</li>
		</ul>
		<div class="tab-content">
			<div class="tab-pane active" id="panel-699475">
				<p>
					选项卡一内容
				</p>
			</div>
			<div class="tab-pane" id="panel-763259">
				<p>
					选项卡二内容
				</p>
			</div>
		</div>
	</div>

40. 警告框
	<div class="alert alert-success alert-dismissable">
		 <button class="close" aria-hidden="true" type="button" data-dismiss="alert">×</button>
		<h4>
			警告！
		</h4> <strong>警告！</strong> 这里是警告的内容<a class="alert-link" href="#">查看</a>
	</div>


41. 折叠列表
	<div class="panel-group" id="panel-872685">
		<div class="panel panel-default">
			<div class="panel-heading">
				 <a class="panel-title collapsed" href="#panel-element-625392" data-toggle="collapse" data-parent="#panel-872685">折叠一</a>
			</div>
			<div class="panel-collapse collapse" id="panel-element-625392">
				<div class="panel-body">
					折叠一的内容...
				</div>
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">
				 <a class="panel-title" href="#panel-element-476487" data-toggle="collapse" data-parent="#panel-872685">折叠二</a>
			</div>
			<div class="panel-collapse in" id="panel-element-476487">
				<div class="panel-body">
					折叠二的内容...
				</div>
			</div>
		</div>
	</div>



42. 轮播
	<div class="carousel slide" id="carousel-857894">
		<ol class="carousel-indicators">
			<li class="active" data-target="#carousel-857894" data-slide-to="0">
			</li>
			<li data-target="#carousel-857894" data-slide-to="1">
			</li>
			<li data-target="#carousel-857894" data-slide-to="2">
			</li>
		</ol>
		<div class="carousel-inner">
			<div class="item active">
				<img alt="" src="skin/img/1.jpg" />
				<div class="carousel-caption">
					<h4>
						焦点图一
					</h4>
					<p>
						焦点图一的描述,焦点图一的描述,焦点图一的描述,焦点图一的描述,焦点图一的描述,
					</p>
				</div>
			</div>
			<div class="item">
				<img alt="" src="skin/img/2.jpg" />
				<div class="carousel-caption">
					<h4>
						焦点图二
					</h4>
					<p>
						焦点图二的描述,焦点图二的描述,焦点图二的描述,焦点图二的描述,焦点图二的描述,焦点图二的描述,
					</p>
				</div>
			</div>
			<div class="item">
				<img alt="" src="skin/img/3.jpg" />
				<div class="carousel-caption">
					<h4>
						焦点图三
					</h4>
					<p>
						焦点图三的描述，焦点图三的描述，焦点图三的描述，焦点图三的描述，焦点图三的描述，
					</p>
				</div>
			</div>
		</div> <a class="left carousel-control" href="#carousel-857894" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-857894" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
	</div>


